<template>
<view class="content">
	<view :style='{"minHeight":"100vh","padding":"80rpx 0 160rpx","borderColor":"#21d5ae","background":"url(http://codegen.caihongy.cn/20221230/5dd9030386864bee8dbcc815a8942660.png) no-repeat center top / 100% auto,url(http://codegen.caihongy.cn/20221230/6c6025ba94804e88a222a9febaaf8c2c.png) no-repeat center bottom / 100% auto,#d5f1f6","borderWidth":"0px 0 0","width":"100%","position":"relative","borderStyle":"dashed","height":"auto"}'>
		<form :style='{"padding":"20rpx 40rpx 60rpx","borderColor":"#b2e2eb","margin":"40rpx auto 0","borderRadius":"20rpx","background":"url(http://codegen.caihongy.cn/20221230/bde67d30424d40a68110c838b9a56dfd.gif) no-repeat 8rpx 8rpx / 32rpx 32rpx,url(http://codegen.caihongy.cn/20221230/bde67d30424d40a68110c838b9a56dfd.gif) no-repeat 98% 98% / 32rpx 32rpx,#fff","borderWidth":"12rpx","display":"block","width":"calc(100% - 64rpx)","borderStyle":"solid","height":"auto"}'>
			<view :style='{"padding":"0 0px 0px","boxShadow":"0px 0px 0px #bbb,inset 0px 0px 0px 0px #eee","margin":"0 0 40rpx","borderColor":"#b2e2eb","alignItems":"center","display":"flex","minHeight":"80rpx","borderRadius":"0px","borderWidth":"0px 0px 8rpx","background":"rgba(255,255,255,.9)","width":"100%","borderStyle":"double","height":"auto"}'>
				<input :style='{"border":"0","padding":"0 20rpx","margin":"0px","color":"#333","borderRadius":"8rpx","flex":"1","background":"rgba(255, 255, 255, 0)","fontSize":"28rpx","height":"80rpx"}' disabled="true" v-model="ruleForm.username" placeholder="留言人用户名"></input>
			</view>
			<view :style='{"padding":"0 0px 0px","boxShadow":"0px 0px 0px #bbb,inset 0px 0px 0px 0px #eee","margin":"0 0 40rpx","borderColor":"#b2e2eb","alignItems":"center","display":"flex","minHeight":"80rpx","borderRadius":"0px","borderWidth":"0px 0px 8rpx","background":"rgba(255,255,255,.9)","width":"100%","borderStyle":"double","height":"auto"}'>
				<textarea :style='{"border":"0","minHeight":"240rpx","padding":"40rpx 40rpx 64rpx","margin":"0px","color":"#333","borderRadius":"8rpx","flex":"1","background":"#fff","fontSize":"28rpx"}' v-model="ruleForm.content" placeholder="留言内容"></textarea>
			</view>
			<view @tap="uploadTap" :style='{"padding":"0 0px 0px","boxShadow":"0px 0px 0px #bbb,inset 0px 0px 0px 0px #eee","margin":"0 0 40rpx","borderColor":"#b2e2eb","alignItems":"center","display":"flex","minHeight":"80rpx","borderRadius":"0px","borderWidth":"0px 0px 8rpx","background":"rgba(255,255,255,.9)","width":"100%","borderStyle":"double","height":"auto"}'>
				<image :style='{"width":"80rpx","margin":"0 0 0 20rpx","borderRadius":"100%","objectFit":"cover","display":"block","height":"80rpx"}' class="avator" v-if="ruleForm.cpicture" :src="baseUrl+ruleForm.cpicture" mode="aspectFill"></image>
				<image :style='{"width":"80rpx","margin":"0 0 0 20rpx","borderRadius":"100%","objectFit":"cover","display":"block","height":"80rpx"}' class="avator" v-else src="../../static/gen/upload.png" mode="aspectFill"></image>
			</view>
			<view :style='{"width":"100%","justifyContent":"center","display":"flex","height":"auto"}'>
				<button :style='{"padding":"0 40rpx","boxShadow":"0px 0px 0px #cfcfe3","margin":"32rpx 20rpx","borderColor":"#d7f5f4","color":"#111","minWidth":"212rpx","borderRadius":"8rpx","background":"#8bdcd9","borderWidth":"8rpx 8rpx 8rpx","width":"auto","lineHeight":"72rpx","fontSize":"28rpx","borderStyle":"outset","height":"88rpx"}' @tap="onSubmitTap" class="bg-red margin-tb-sm">提交</button>
			</view>
		</form>
	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				ruleForm: {
					userid: '',
					username: '',
					content: '',
					reply: '',
					cpicture: '',
				},
				user: {}
			}
		},
		computed: {
			baseUrl() {
				return this.$base.url;
			}
		},
		async onLoad(options) {
			let table = uni.getStorageSync("nowTable");
			// 获取用户信息
			let res = await this.$api.session(table);
			this.user = res.data;
			// 如果有登录，获取登录后保存的userid
			this.ruleForm.userid = uni.getStorageSync("userid")
            if(table == `yonghu`){
                this.ruleForm.username = this.user.yonghuming
            }
            if(table == `yisheng`){
                this.ruleForm.username = this.user.zhanghao
            }
			this.styleChange()
		},
		methods: {
			uploadTap() {
				let _this = this;
				this.$api.upload(function(res) {
					_this.ruleForm.cpicture = 'upload/' + res.file;
					_this.$forceUpdate();
					_this.$nextTick(()=>{
						_this.styleChange()
					})
				});
			},
			styleChange() {
				this.$nextTick(()=>{
					// document.querySelectorAll('.my-publish-pv .uni-input-input').forEach(el=>{
					//   el.style.backgroundColor = this.myPublishForm.content.input.backgroundColor
					// })
				})
			},
			async onSubmitTap() {
				if(this.ruleForm.content){
                    this.ruleForm.avatarurl = uni.getStorageSync('headportrait')?uni.getStorageSync('headportrait'):'';
					await this.$api.add(`messages`, this.ruleForm);
					this.$utils.msgBack('提交成功');
				}else{
					this.$utils.msg("请填写留言内容")
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: calc(100vh - 44px);
		box-sizing: border-box;
	}
</style>
